<template>
  <div id="appChild">
    <!--<p @click="getParentData()">查看父组件</p>-->
    <p :class="titleClass">{{title}}----{{AppTitle}}</p>
    <span class="addPlan">添加任务</span><input class="add" type="text" v-model="content" @keydown="add">
    <!--未完成计划-->
    <h3 class="unfinish">进行中</h3>
    <ul>
      <li v-for="(item,k) in list" v-if="!item.checked">
        <input type="checkbox" v-model="item.checked" @change="update">
        <span>{{item.content}}</span>
        <button @click="remove(k)">删除</button>
      </li>
    </ul>

    <!--已完成计划-->
    <h3 class="fineshed">已完成</h3>
    <ul>
      <li v-for="(item,k) in list" v-if="item.checked">
        <input type="checkbox" v-model="item.checked" @change="update">
        <span>{{item.content}}</span>
        <button @click="remove(k)">删除</button>
      </li>
    </ul>

    <p @click="listenNavData()">查看本页面的名称</p>
  </div>
</template>

<script>
  // 引用封装的storage方法
  import storage from '../model/storage.js';
  // 引入封装的vueEvent  用来广播数据和监听广播
  import vueEvent from '../model/vueEvent';
  export default {
    name: 'todoList',
    data(){
      return {
        title:"todoList",
        titleClass:'todoList',
        content:'',
        // checked:false,
        parentTitle:'',
        list:[],
      }
    },
    // 接收父组件的传值
    props:['AppTitle'],
    methods:{
      // 添加事件
      add(e) {
        if(this.content!="" && e.keyCode==13){
          console.log(this);
          this.list.push({
            'checked':false,
            'content':this.content
          });
          this.content='';
          // 将任务列表存入本地缓存
          // this.update();
          storage.set('list',this.list);
        }
      },
      // 删除事件
      remove(k) {
        this.list.splice(k,1);
        // this.update();
        storage.set('list',this.list);
      },
      // 将数据存入缓存
      update() {
        localStorage.clear();
        localStorage.setItem('list',JSON.stringify(this.list));
      },
      // 获取父组件的传值
      getParentData() {
        this.parentTitle=this.$parent.msg;
        alert(this.parentTitle);
      },
      // 监听导航栏广播数据
      listenNavData(){
        alert('本页面的标题是：'+ vueEvent.navTitle );
      },
    },
    // 生命周期
    beforeCreate(){},
    created(){},
    beforeMount(){

    },
    mounted(){
      // 获取缓存中的任务列表
      // var list=JSON.parse(localStorage.getItem('list'));
        var list=storage.get('list') || [];
        this.list=list;

      // 监听广播数据
      vueEvent.$on('to-todoList',function (item) {
        this.navTitle=item;
      })
    }
  }
</script>

<style scoped>
  #appChild {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
  }
  li{
    list-style: none;
  }
  .unfinish, .fineshed{
    text-align: left;
  }
  ul li{
    width: 100%;
    text-align: left;
    /*padding-right: 100px;*/
    padding-left: 30px;
    box-sizing: border-box;
    position: relative;
    margin-bottom: 10px;
    color: #666;
  }
  li button{
    position: absolute;
    right: 40px;
    outline: none;
    border: 1px solid #666;
    padding:2px 15px;
    border-radius: 4px;
    background-color: transparent;
    color: #666;
  }
  ul:first-of-type{
    background-color: pink;
    padding:20px 0;
  }
  ul:nth-of-type(2){
    background-color: lightskyblue;
    padding:20px 0;
  }
  .addPlan{
    color: #666;
    margin-right: 10px;
  }
  .add{
    border-radius: 4px;
    border:1px solid #999;
    padding:5px 10px;
  }
</style>
